<template>
<div :class="[$style.container]">
  <ul :class="[$style.groupList]" v-infinite-scroll="onLoad" :infinite-scroll-disabled="disabled">
    <li :class="[$style.groupItem]" v-for="(rows, k)  in groups" :key="k">
      <div :class="[$style.title]">{{k}}</div>
      <ul :class="[$style.list]">
        <li :class="[$style.item]" v-for="row  in rows" :key="row.id">
          <div :class="[$style.avatar]">
            <color-avatar :size="32" :text="row.creationByName" initial></color-avatar>
          </div>
          <div :class="[$style.content]">
            <div :class="[$style.label]">
              <div :class="[$style.text]">{{row.creationByName}}</div>
              <div :class="[$style.time]">{{row.creationTime | time}}</div>
            </div>
            <div :class="[$style.description]">
              {{row.description}}
            </div>
          </div>
        </li>
      </ul>
    </li>
  </ul>
  <empty-data v-if="!pageData.loading && pageData.rows.length < 1">暂无动态信息</empty-data>
  <div class="text-center my-2 text-secondary">
    <span v-if="pageData.loading">加载中...</span>
    <span v-if="!pageData.hasMore && !pageData.loading && pageData.rows.length > 0">没有更多了</span>
  </div>
</div>
</template>

<script lang="ts">

import { PageData, PageQueryParams } from '@/config/page'
import { queryDynamicsByDoc } from '@/api/dir-dynamic'
import date from '@/filters/date'
import filename from '@/filters/filename'
import { Vue, Component, Provide, Watch, Ref, Prop } from 'vue-property-decorator'

@Component
export default class DirTrend extends Vue {
  @Prop() data!: any

  pageData = new PageData(this.loader)

  get loader () {
    return (params: PageQueryParams) => {
      return queryDynamicsByDoc(this.data?.id, params)
    }
  }

  get groups () {
    const map: Record<string, any[]> = {}
    this.pageData.rows.forEach(v => {
      const key = date(v.creationTime)
      if (!map[key]) map[key] = []
      map[key].push(formatItem(v))
    })
    return map

    function formatItem (r: any) {
      let description
      if (r.type === 'create') description = `创建文档 ${filename(r.input)}`
      if (r.type === 'upload') description = `上传文档 ${filename(r.input)}`
      if (r.type === 'delete') description = `删除文档 ${filename(r.output)}`
      if (r.type === 'moveIn') description = `从 ${r.output} 移动文档 ${filename(r.input)}`
      if (r.type === 'moveOut') description = `移动文档 ${filename(r.output)} 到 ${r.input}`
      if (r.type === 'copyIn') description = `从 ${r.output} 复制文档 ${filename(r.input)}`
      if (r.type === 'copyOut') description = `复制文档 ${filename(r.output)} 到 ${r.input}`
      if (r.type === 'update') description = `更新文档 ${filename(r.input)}`
      if (r.type === 'rename') description = `文档 ${filename(r.output)} 重命名为 ${filename(r.input)}`
      return Object.assign({ description }, r)
    }
  }

  get disabled () {
    return this.data.loading || !this.data.hasMore
  }

  onLoad () {
    this.pageData.loadNext()
  }

  created () {
    this.pageData.load({ prop: 'creationTime', order: 'desc' })
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {
  height: calc(100vh - 48px - 40px - 64px);
  overflow: auto;
}

.groupList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.groupItem {
  padding: 12px 0;
}

.title{
  color: $text-heading-color;
  margin-bottom: 4px;
  padding: 0 12px;
}

.item {
  display: flex;
  padding: 8px 12px;

  &:hover {
    background-color: $bg-body-color;
  }
}

.avatar {
  flex: 0 0 auto;
  width: 42px;
}

.content {
  flex: 1 1 auto;
}

.label {
  display: flex;
}

.text {
  flex: 1 1 auto;
}

.time {
  flex: 0 0 auto;
  width: 48px;
  font-size: 12px;
  color: $text-secondary-color;
}

.description {
  color: $text-secondary-color;
  font-size: 12px;
  margin-top: 4px;
}
</style>
